<template>
  <view>
    <view class="volunteers_list">
      <!-- myKey 为 1 时，启用滑动删除 -->
      <template v-if="myKey === '1'">
        <uni-swipe-action>
          <block class="movable-area" v-for="(item, i) in activities" :key="i">
            <uni-swipe-action-item :options="options" @click="swipeActionClickHandler(item)">
              <view class="content" @click="gotoDetail(item.id)">
                <my-volunteer :activity="item" :myKey="myKey"></my-volunteer>
              </view>
            </uni-swipe-action-item>
          </block>
        </uni-swipe-action>
      </template>


      <!-- myKey 不为 1 时，直接渲染内容 -->
      <template v-else>
        <view v-for="(item, i) in activities" :key="i" @click="gotoDetail(item.id)">
          <my-volunteer :activity="item" :myKey="myKey"></my-volunteer>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activities: [],
        myKey: '',
        isload: false,
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#C00000'
          }
        }, ]
      };
    },
    onLoad(options) {
      console.log(options.id);
      this.getActivity(options.id);
      this.myKey = options.id;
    },
    methods: {
      async getActivity(id, cd) {
        this.isload = true;
        if (id === '1') {
          const {
            data: res
          } = await uni.$http.get('/activities/myfound')
          console.log(res);
          if (res.code !== 1) return uni.$showMsg()
          this.activities = res.data.map(item => ({ ...item,
            x: 0
          })); // 初始化 x 值
        } else if (id === '2') {
          const {
            data: res
          } = await uni.$http.get('/activities/myparticipation')
          console.log(res);
          if (res.code !== 1) return uni.$showMsg()
          this.activities = res.data.map(item => ({ ...item,
            x: 0
          })); // 初始化 x 值
        } else if (id == 3) {
          return uni.$showMsg("暂无开发，敬请期待")
        } else if (id == 4) {
          return uni.$showMsg("暂无开发，敬请期待")
        }
        this.isload = false;
        // 检查 cd 是否为函数
        if (typeof cd === 'function') {
          cd();
        }
      },
      gotoDetail(item) {
        // 跳转到详情页，并传递参数
        uni.navigateTo({
          url: `../../subpkg/activity-one-detail/activity-one-detail?query=${item}&myKey=${this.myKey}`,
        });
      },
      swipeActionClickHandler(item) {
        if (this.myKey !== '1') return; // 仅 myKey 为 1 时允许删除
        console.log(item)
        // 找到 item 在 activities 数组中的索引
        const id = item.id
        const index = this.activities.findIndex(activity => activity.id === id);
        
        // 如果找到对应的 item
        if (index !== -1) {
          // 弹出确认框
          uni.showModal({
            title: '提示',
            content: '确定要删除该活动吗？',
            success: (res) => {
              if (res.confirm) {
                //从后端表中删除
                if (!this.deleteItem(id)) return uni.$showMsg("删除失败！");
                // 从 activities 数组中移除 item
                this.activities.splice(index, 1);
                uni.$showMsg('删除成功'); // 提示删除成功
              }
            }
          });
        } else {
          uni.$showMsg('未找到该活动'); // 提示未找到
        }
      },

      async deleteItem(id) {
        console.log(id)
        const {
          data: res
        } = await uni.$http.delete(`/activities/delete/${id}`)
        console.log(res);
        if(res.code !== 1) return false;
        return true;
      },
    },
    onPullDownRefresh() {
      this.activities = []
      this.getActivity(this.myKey, () => {
        uni.stopPullDownRefresh()
      })
    },
  }
</script>

<style lang="scss">
  .content {
    width: 100%; // 内容宽度占满
  }
</style>
